<template>
  <div>
     <div>
       <vxe-table
        resizable
        show-overflow
        :auto-resize="true"
        keep-source
        ref="xTable"
        :loading="demo1.loading1"
        :data="demo1.tableData1"
        :edit-config="{ trigger: 'manual', mode: 'row' }">
        <vxe-table-column field="name" title="模块名称" :title-help="{message: '希望显示的模块信息'}"></vxe-table-column>
        <vxe-table-column field="sex" title="开放权限" :edit-render="{name: '$select', options: demo1.sexList2}"></vxe-table-column>
        <vxe-table-column field="date13" title="修改日期" :edit-render="{name: '$input', props: {type: 'week', placeholder: '请选择日期'}}"></vxe-table-column>
        <vxe-table-column title="操作" width="160">
          <template #default="{ row }">
            <template v-if="isActiveStatus(row)">
              <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
              <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
            </template>
            <template v-else>
              <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
            </template>
          </template>
        </vxe-table-column>
      </vxe-table>
     </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VXETable, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'

export default defineComponent({
  setup () {
    const xTable = ref({} as VxeTableInstance)

    const demo1 = reactive({
      loading1: false,
      tableData1: [
        { id: 10001, name: '基本信息', sex: '0',  date13: '2020-08-20' },
        { id: 10002, name: '教育经历', sex: '1', date13: '2020-08-20' },
        { id: 10003, name: '工作经历', sex: '1', date13: '2020-08-20' },
        { id: 10004, name: '员工证书', sex: '1', date13: '2020-12-04' },
      ],
      sexList1: [
        { label: '', value: '' },
        { label: '男', value: '1' },
        { label: '女', value: '0' }
      ],
      sexList2: [
        { label: '', value: '' },
        { label: '所有人可见', value: '0' },
        { label: '本公司HR可见', value: '1' },
        { label: '本公司HR和项目经理可见', value: '2' },
        { label: '其他公司HR可见', value: '3' },
        { label: '都不可见', value: '4' },
      ]
    })

    const isActiveStatus = (row: any) => {
      const $table = xTable.value
      return $table.isActiveByRow(row)
    }

    const editRowEvent = (row: any) => {
      const $table = xTable.value
      $table.setActiveRow(row)
    }

    const saveRowEvent = () => {
      const $table = xTable.value
      $table.clearActived().then(() => {
        demo1.loading1 = true
        setTimeout(() => {
          demo1.loading1 = false
           ElMessage.success({
            message: '保存成功！',
            type: 'success'
          });
        }, 300)
      })
    }

    const cancelRowEvent = (row: any) => {
      const $table = xTable.value
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row)
      })
    }

    return {
      xTable,
      demo1,
      isActiveStatus,
      editRowEvent,
      saveRowEvent,
      cancelRowEvent
    }
  }
})
</script>
<style lang="scss">
</style>
